<template>
  <div class="con">
    <el-container>
      <el-main style="padding:0;">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            账户管理
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>代付管理
          </p>
          <div class="content">
            <div class="sousuojg6_10">
              <el-form
                :model="formInline"
                label-width="100px"
                class="demo-form-inline"
              >
                <el-form-item label="流水号">
                  <el-input
                    v-model="formInline.serialNumber"
                    placeholder="请输入流水号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formInline.status" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="停用" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申请时间">
                  <el-date-picker
                    v-model="dataTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </div>

            <div class="buttons">
              <el-button type="primary" @click="queryPayActiveList"
                >搜索</el-button
              >
              <el-button style="margin-left: 10px" type="" @click="reset"
                >重置</el-button
              >
              <el-button type="primary" class="butt" style="margin-left:40px" @click="activity()">申请额度</el-button>
               <el-button type="primary" @click="payActiveListExport" class="butt" v-if="totalNum>0"
              >批量导出</el-button
            >
            </div>
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
              stripe
              border
              :row-style="{ height: '0px' }"
              :cell-style="{ padding: '0px' }"
              style="width: 98%;margin-bottom: 20px; margin-left: 20px;"
              v-loading="listLoading"
            >
              <!-- <el-table-column
                type="selection"
                min-width="40"
              ></el-table-column> -->
              <el-table-column
              show-overflow-tooltip
                prop="serialNumber"
                min-width="300"
                label="流水号"
                width="180"
              ></el-table-column>
              <el-table-column min-width="160" label="申请日期">
                <template slot-scope="scope">{{
                  scope.row.createDate
                }}</template>
              </el-table-column>
              <el-table-column
              show-overflow-tooltip
                prop="applyQuota"
                min-width="150"
                label="申请金额"
              ></el-table-column>
              <el-table-column show-overflow-tooltip min-width="120" label="代付模式">
                <template slot-scope="scope">
                  <span v-if="scope.row.type == 1">单笔</span>
                  <!-- <span v-if='scope.row.status == 1'>停用</span> -->
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip min-width="120" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">正常</span>
                  <span v-if="scope.row.status == 1">停用</span>
                </template>
              </el-table-column>
              <el-table-column
              show-overflow-tooltip
                prop="remainQuota"
                min-width="150"
                label="剩余可用余额"
              ></el-table-column>
              <el-table-column
              show-overflow-tooltip
                prop="allQuota"
                min-width="150"
                label="账户可用余额"
              ></el-table-column>
              <el-table-column
                prop="channelName"
                min-width="180"
                show-overflow-tooltip
                label="通道名称"
              ></el-table-column>
            </el-table>
           
            <el-pagination
              background
              style="text-align: right;"
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formInline.page"
              :page-size="formInline.number"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[20, 50, 100]"
              :total="totalNum"
            ></el-pagination>
          </div>
        </div>
      </el-main>

      <!-- applyCredit -->
      <applyCredit
        :applyCreditShow="applyCreditShow"
        v-on="applyCreditSuccess()"
      ></applyCredit>
    </el-container>
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import applyCredit from "./applyCredit";
import qs from "qs";
export default {
  data() {
    return {
      applyCreditShow: false,
      formInline: {
        activeName: "",
        status: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
      },
      dataTime: [],
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      listLoading: false,
    };
  },
  components: {
    applyCredit,
  },
  mounted() {
    this.queryPayActiveList();
  },
  methods: {

    // 重置
    reset() {
      // alert("重置执行")
      this.formInline.serialNumber = "";
      this.formInline.status = "";
      this.formInline.payStatus = "";
      this.formInline.oemName = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.formInline.page=1
      this.mechanism = "";
      this.dataTime = [];
      this.queryPayActiveList();
    },
    activity() {
      this.applyCreditShow = true;
    },
    queryPayActiveList() {
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      https.queryRepayList(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.listLoading = false;
          return;
        }
        this.tableData = res.data.dowithdrawReponse;
        this.totalNum = res.data.total;
        this.listLoading = false;
      });
    },
    payActiveListExport() {
      // window.location.href = this.GLOBAL.httpurl + `/api/active/payActiveList/excel/export?${qs.stringify(this.formInline)}`;
      let that = this;
      that
        .axios({
          url: "api/active/payActiveList/excel/export",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.formInline,
          responseType: "arraybuffer",
        })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download =
            "代付管理列表" +
            date.getFullYear() +
            (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) +
            (date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds());
          link.click();
        })
        .catch((e) => {
        });
    },
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.queryPayActiveList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
    applyCreditSuccess() {
      bus.$on("applyCreditSuccess", (res) => {
        this.applyCreditShow = res.show;
        if (res.type == 1) {
          this.queryPayActiveList();
        }
      });
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.elbtn {
  margin-left: 80%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btn {
  float: right;
}
.content {
  width: calc(100% - 40px);
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}
</style>
